<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>Test de grabacion - comienzo</title>
  <link href="/static/css/style.css?v=1" rel="stylesheet">
  <link href="/static/css/bootstrap/bootstrap.css" rel="stylesheet">
  <link href="/static/css/bootstrap/datepicker.css" rel="stylesheet">
  <script type="text/javascript" src="/static/js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="/static/js/jquery.validate.js"></script>
  <script type="text/javascript" src="/static/js/jquery-ui-1.9.1.js"></script>
  <script type="text/javascript" src="/static/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="http://ip-geo.appspot.com/geo_data.js"></script> 
  <script type="text/javascript" src="/static/js/flash_detect.js"></script>
</head>

<body onload="setup()">
  <div class="container">
    <h2 class="text-center">¡Bienvenido/a!</h2>

    <p>
    Este proyecto consiste en <b>grabar una serie de frases a través de tu computadora</b>, para luego poder estudiar las características del habla de cada región (por ejemplo, la tonada o los sonidos empleados).
    </p>

    <p>
    Requisitos para poder participar:

    <ol>
    <li>Tener una <b>buena conexión a Internet</b>; preferentemente, no wireless.</li>
    <li>Tener un <b>buen micrófono</b>; preferentemente, no usar el micrófono incluido en una laptop.</li>
    <li>Estar en un <b>ambiente silencioso.</b></li>
    </ol>

    Si cumplís estos requisitos, por favor completá los siguientes datos para comenzar:

    </p>

    <form id="speaker-form" class="form-horizontal" action="/audios/add_speaker/" method="post"  novalidate="novalidate">
      
        <div id="speaker-controls"> 

          <div class="control-group">
              <label class="control-label">Sexo:</label>
              <select id="sex" name="sex">
                <option value="woman">Femenino</option>
                <option value="man">Masculino</option>
              </select>
          </div>

          <div class="control-group">
            <label class="control-label">Lugar donde te criaste:</label>
            <select id="birthPlace" name="birthPlace">
              <option value="bsas">Ciudad de Buenos Aires y alrededores</option>
              <option value="cba">Ciudad de Córdoba y alrededores</option>
              <option value="otro">Otro</option>
            </select>
          </div>

          <div class="control-group">
            <label class="control-label">Lugar donde vivís actualmente:</label>
            <select id="livePlace" name="livePlace">
              <option value="bsas">Ciudad de Buenos Aires y alrededores</option>
              <option value="cba">Ciudad de Córdoba y alrededores</option>
              <option value="otro">Otro</option>
            </select>
          </div>

          <input type="hidden" id="location" name="location">

          <div class="control-group">
            <label class="control-label">Mes de nacimiento:</label>
            <div class="input-append date" id="datepicker" data-date="01-1990" data-date-format="mm-yyyy" name="birthDateDiv" data-date-minViewMode="1" data-date-viewMode="1">
                
                <input id="birthDate" name="birthDate" class="span2" size="16" type="text" value="01-1990">

                <span class="add-on"><i class="icon-calendar"></i></span>

            </div>
          </div>

        </div>
        
      <!--<p id="announcement">
        En la próxima pantalla, te aparecerá un cartel de Flash pidiendo autorización para acceder a tu cámara y micrófono. 
        Por favor, seleccioná "Permitir / Allow".
        ¡Gracias!
      </p>-->

      <p id="announcement">
        <div id="browser-detect">
          Detectando navegador ...
        </div>
        <div id="flash-detect">
          Detectando Flash ...
        </div>
      </p>

      <div class="input text-center">
        <input id="start" class="btn btn-large btn-primary" type="submit" value="¡Empezar!" disabled>
      </div>
     
    </form>

  </div>
  <div id="version">
    Versión 1.0 Beta
  </div>
</body>

<script type="text/javascript">
  
  function setup() {
    try {
      var loc = geo.getLocation();
      $("input#location").val(loc.city+" ("+loc.country+")");  
    } catch(err){
      $("input#location").val("BS AS HARDCODEADO");
    }
    
    $("#sex").prop("selectedIndex", -1);
    $("#birthPlace").prop("selectedIndex", -1);
    $("#livePlace").prop("selectedIndex", -1);

    $('#datepicker').datepicker();

    //validate speaker-form
    $("#speaker-form").validate( {

      errorPlacement: function(error, element) {
          if ($(element).attr("name") == "birthDate") {
            error.insertAfter($(element).parent());
          } else {
            error.insertAfter(element);
          }
      },    
      rules: {
        sex: {
            required: true
        },
        birthPlace: {
            required: true
        },
        livePlace:{
            required: true
        },
        birthDate:{
            required: true
        }
/*          required: function(element) {
            console.log(element.val);
            var birthDate = $("input#birthDate");
            var re = new RegExp("^[0-9]{2}-[0-9]{4}$", "g");
            if (!re.test(element.val)){
              $(element).html("Por favor poné una fecha válida");
            }
          }*/
      },
      messages: {
        sex: "Por favor completa el sexo",
        birthPlace: "Por favor completá el lugar de nacimento",
        livePlace: "Por favor completá el lugar donde vives",
        birthDate: "Por favor completá con una fecha válida"
      },
      submitHandler: function(form) {
        form.submit();
      }
    });

    $("div#flash-detect").html(""); 

    var proceed = true;    
    if(FlashDetect.versionAtLeast(11, 5)){

        var img = $('<img id="dynamic">'); 
        img.attr('src', "/static/css/img/ok.png");
        img.appendTo('div#flash-detect');

        $("div#flash-detect").html( $("div#flash-detect").html() + "Tiene la version Flash > 11.5");

        $("div#flash-detect").hide();
    }else{

        var img = $('<img id="dynamic">'); 
        img.attr('src', "/static/css/img/cancel.png");
        img.appendTo('div#flash-detect');

        $("div#flash-detect").html( $("div#flash-detect").html() + "No puede continuar. Debe tener Flash 11.5 o superior");
    
        proceed = false;
    } 

    $("div#browser-detect").html(""); 
    if($.browser.chrome || ($.browser.mozilla && $.browser.version > 2)){

        var img = $('<img id="dynamic">'); 
        img.attr('src', "/static/css/img/ok.png");
        img.appendTo('div#browser-detect');

        $("div#browser-detect").html( $("div#browser-detect").html() + "Posee un navegador soportado");

        $("div#browser-detect").hide();
    }else{
        var img = $('<img id="dynamic">'); 
        img.attr('src', "/static/css/img/cancel.png");
        img.appendTo('div#browser-detect');

        $("div#browser-detect").html( $("div#browser-detect").html() + "No puede continuar. Navegador no compatible");  

        proceed = false;
    }

    if (proceed) {
      $("#start").prop("disabled", false);
    }
  }

</script>

</html>
